<template>
  <div>
    <van-nav-bar title="程序员头条 - 登录" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="user.mobile"
        required
        name="mobile"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号', pattern: /^1[3-9]\d{9}$/ }]"
      />
      <van-field
        v-model="user.code"
        required
        type="password"
        name="code"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码', pattern: /^\d{6}$/ }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit" :disabled="isLoading" :loading="isLoading" loading-text="正在登录中ing...">
            登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { loginAPI } from '@/utils/api'
import { Notify } from 'vant'
import { setToken} from '@/utils/token'

export default {
  data() {
    return {
      isLoading: false,
      user: {
        mobile: '13444445555',
        code: '246810'    //246810
      }
    };
  },
  methods: {
    async onSubmit(values) {
      this.isLoading = true
      try {
        const res = await loginAPI(this.user)
        // console.log(res);
        Notify({ type: 'success', message: '登录成功！！！' });
        //保存token
        setToken(res.data.data.token)
        localStorage.setItem('refresh_token', res.data.data.refresh_token)
        //
        this.$router.replace({
          path: this.$route.query.path || '/layout/home'
        })
      } catch (error) {
        Notify({ type: 'danger', message: '账号或密码不正确' });
      }
      this.isLoading = false
    },
  },
};
</script>

<style lang="less" scoped>
/* 此类名是van-nav-bar组件内根标签 */
// .van-nav-bar {
//   background-color: #007bff;
// }

/* 此选择器名字是van-nav-bar组件内标签
scoped尝试把此选择器后属性选择器匹配当前页面标签 (选不中组件内部的) */
// lang="less" 当前style标签内是less语法
// 用/deep/就不会被vscode标记红线
// /deep/ 会把属性选择器加到前面 (用后代选择器的方式往里找匹配的类名)
// 结论: 要修改组件内样式, 如果你用了scoped, 就需要在选择器前/deep/即可
// /deep/ .van-nav-bar__title {
//   color: white;
// }
</style>